Hell you are welcome to this lecture.
This lecture or we are going to be creating this structure for our app.
He is in hastier mail.
Saw I have got my text editor all point higher inside the index.
Hate mail far which is what I've highlighted.
So this is where I will create these structure for the app.
Me with this is going to work.
What I am going to do rather than you watch me type the code.
I would prefer write the code and then explain what I have done.
Line one here I have got a line of code here which is known as the declaration.
This busily is the first thing you do in an 8 year old document.
Oh what this does.
It notifies the web browser that the page they are about to view is in his tier Mail 5 document
line two and line four.
They are hastier mail tags so that's where the actual hits here mail begins.
So the content between these two tags here is what will be the hastier mail content.
So in between this his email tags will nest either tax that all together we will drop the hasty mail
content line 2 here is just the beginning of his term old tag followed by the blank.
This is an attribute value to use it which means English.
So without tubules you need to enclose their values in quotes.
Every tag most tags you'd have in plain clothes in the closing tag you can tell by the forward slash
before the tag is closed.
I have added some more code which is the head tag from Line 3 here to line 7.
You can see a bigger pair because you've got a dotted line under the closing and on daddy be opening
tack So this is the head tack.
Most of the tags or information within the header tag is not visible within the browser.
That means visitors can't see them.
The only there for information purposes are and also to help with search changes.
All right so inside the head tab we've got a few men that tags with attributes attached.
So were the first line on line.
For there we've caught the mid tag and we've got a major cast set.
The cast set is the attribute and the value is utf that it is basically the type of encoding that is
used in most Web browsers so most characters are supported by the UTI.
That it is an encoding type line 5 here.
We've got a metal bar with a attribute of knowing Lin name.
Basically it's the attribute and the value is viewport viewport.
Basically it refers to this screen size of any device a wall is saying here is that these this website
or this map is adaptable to any screen size so regardless of what device you using to view you be able
to fit it to the screen size.
That's basically what five is saying.
Okay you can see the content here see the content equals to it with the explosive device minus.
So basically what they are saying here is that regardless the content can be viewed regardless of the
device.
With a case where though the screen is small or large you can scale it and the initial scale Here's
what point zero says here use as guillebeau Yes there is a user can scale or resize the screen to fit
the app okay.
Line 6 here is C..
This is if you have any reference for your style show.
This is where you need to include it.
So this style sheet here last the reference I have put here to establish it so I have had the final
chunk of code for the body tags school from line 8 to line 15.
So the body tags still from line 8 and in between the body tag I have all saw nested SOM or the tag.
Missed out Lee closing body tag.
Okay enough the close and play tag.
I just say that.
Okay so in between the body tag I have got more than nested tags.
So we've got the divided D.
Basically is used to divide a section off a page and I'm giving it an I.D. attribute equal to.
The idea is used for cause.
How we use that to target that did during our as their styling line 10 here basically saying Hit one
head in intact with a title to do list 11 is the import.
This is where we will actually type the task.
We want to do.
And I'm giving it an idea with a valley of task again.
I'll use this idea for stylin purposes later.
I have also attached a button next to the input and the button I have given the button and a esrock
Equals to add.
So this is where the button will click to add a task.
Once we've done the input.
Okay an I'm giving the idea an attribute as well we'll use that to style as well.
And here this is how you write a comment in Haiti email for you then wondered anything with a comment.
The web browser will ignore.
So you do a left angled bracket quote as cremation dashed that and then double dash and right angle
bracket so we can see it's almost grey that's or anything with that.
The web browser will not run that piece of code or write them line 13 of great in another Deve here
would leave a D to dos.
This here is where the to dos will be listed.
Once we've said it probably they'll be listed inside this div right.
I think 11 we've got a script tag So this is where we'll work.
This javascript far will create it.
Here we are making reference to it inside our hastier mail document.
To own this group were right to be in this group far would be reference from here.
Right so that's it for our ecmo document.
If I just say that I think I have already.
Let's run it so we can see what it looks like.
So as the project failed I just open it up and double click.
To run the terminal so we can see what the hastier may look like.
As just the mindset a bit.
Right so this is what our page looks like at the moment.
This is where the task will input day tasks.
And this is where we'll add it saw fit for the structure.
In our next leg Your will be building or styling this content to make it look a bit prettier.
Use in C assess.
That's it.
Thanks for watching.
Bye for now.